import React, { useEffect, useState } from 'react'
import { BackTop as AntdBackTop, Button } from 'antd'
import computDetailRight from '@/utils/computDetailRight'
import { VerticalAlignTopOutlined } from '@ant-design/icons'
export default function BackTop({
  target,
}: {
  target: () => HTMLElement | null
}) {
  const [positionRight, setPositionRight] = useState(0)

  useEffect(() => {
    computDetailRight(setPositionRight, target() as HTMLDivElement)
  }, [target])
  return (
    <AntdBackTop
      target={() => target() as HTMLElement}
      style={{ right: positionRight }}
    >
      <Button
        type="primary"
        shape="circle"
        icon={<VerticalAlignTopOutlined />}
      />
    </AntdBackTop>
  )
}
